<template>
  <div>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <article class="tile is-child box">
          <h1 class="title">{{$t("message.addArticle")}}</h1>
          <div class="block">
            <div class="control">
              <label class="label">{{$t("message.articleName")}}</label>
              <p class="control">
                <input v-model="article.name" class="input" type="text" placeholder="Article Name">
              </p>
              <label class="label">{{$t("message.description")}}</label>
              <p class="control">
                <input v-model="article.description" class="input" type="text" placeholder="Description">
              </p>
            </div>
            <p class="control">
                <button class="button is-primary" @click="submit" >{{$t("message.submit")}}</button>
            </p>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Message from 'vue-bulma-message'
const MessageComponent = Vue.extend(Message)
const openMessage = (propsData = {
  title: '',
  message: '',
  type: '',
  direction: '',
  duration: 1500,
  container: '.messages'
}) => {
  return new MessageComponent({
    el: document.createElement('div'),
    propsData
  })
}
export default {
  data: function () {
    return {
      article: {
        name: '',
        description: '',
        status: 0
      }
    }
  },
  methods: {
    submit: function () {
      this.$data.article.name.replace(/(^\s*)|(\s*$)/g, '')
      console.log(this.$data.article.name)
      this.$store.dispatch('addArticle', {
        userId: this.$store.state.app.personal.user.userId,
        article: this.$data.article
      }).then((response) => {
        openMessage({
          message: '添加成功',
          type: 'success',
          duration: 1000,
          showCloseButton: true
        })
        this.$router.push('/product')
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
